<template>
  <div class="container distribution-goods">
    <div class="tabs-card">
      <div class="tab" @click="changeTypeTabs(1)" :class="{active:type==1}">直推</div>
      <div class="tab" @click="changeTypeTabs(2)" :class="{active:type==2}">二级分销</div>
      <div class="tab" @click="changeTypeTabs(3)" :class="{active:type==3}">三级分销</div>
    </div>
    <div class="tabs" :class="{fixed:fixed}">
      <div class="tab" @click="changeTabs(0)" :class="{active:status==0}">全部</div>
      <div class="tab" @click="changeTabs(2)" :class="{active:status==2}">已结算</div>
      <div class="tab" @click="changeTabs(1)" :class="{active:status==1}">未结算</div>
    </div>
    <div class="distribution-tabs-bg" :class="{fixed:fixed}"></div>
    <div class="distribution-list" v-if="data">
      <div class="ant-product distribution-product" v-for="(item,index) in data.list" :key="index" @click="$router.push({ path: '/pages/productInfo/productInfo', query: { goods_id: item.goods_id }})">
        <div class="ant-product-info">
          <div class="ant-product-header">
            <p class="ant-product-name">订单号：{{item.order_sn}}</p>
            <!-- <span class="ant-product-state state-done">已结算</span> -->
            <!-- <span class="ant-product-state state-not-done">未结算</span> -->
          </div>
          <div class="ant-product-body">
            <div>
              <p>订单总价格：{{item.goods_price}}</p>
              <p>分成时间：{{item.create_time}}</p>
            </div>
            <div class="distribution-info">
              <p class="ant-product-state state-done" v-if="item.status==0">未付款</p>
              <p class="ant-product-state state-not-done" v-if="item.status==1">已付款，等待分成</p>
              <p class="ant-product-state state-not-done" v-if="item.status==2">已分成</p>
              <p>我的佣金 {{item.money}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <i-load-more v-if="!data&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="data&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import request from "@/api/request";
  import {
    getDate
  } from '@/utils/index'
  export default {
    components: {},
    data() {
      return {
        data: null,
        type: 1, // 收入类型 1-直推(一级分销) 2-二级分销 3-三级分销
        status: 0, // 订单状态 0-全部 1-未结算 2-已结算
        page: 1,
        loading: false,
        fixed: false,
        isLoadEnd: false

      };
    },
    computed: {},
    methods: {
      changeTabs(val) {
        this.page = 1
        this.data = null
        this.status = val;
        this.isLoadEnd = false
        this.getDistributIncomeList()
      },
      changeTypeTabs(val) {
        this.page = 1
        this.data = null
        this.type = val;
        this.isLoadEnd = false
        this.getDistributIncomeList()
      },
      getDistributIncomeList() {
        const {
          type,
          status,
          page,
        } = this
        this.loading = true
        request.getDistributIncomeList({
          type,
          status,
          page,
        }).then(res => {
          if (res.data.list.length < 20) {
            this.isLoadEnd = true
          }
          if (this.data) {
            this.data.list = this.data.list.concat(res.data.list)
          } else {
            this.data = res.data
          }
          this.loading = false;
        }).catch(e => {
          this.loading = false;
        })
      }
    },
    onPageScroll(e) {
      if (e.scrollTop >= 445) {
        this.fixed = true
      } else {
        this.fixed = false
      }
    },
    onReachBottom() {
      this.page++;
      this.getDistributIncomeList();
    },
    mounted() {
      if (this.$route.query.type) {
        this.type = this.$route.query.type
      }
      this.data = null
      this.getDistributIncomeList()
    }
  };

</script>

<style lang="less">
  .distribution-goods {
    background: #fff;

    .tabs {
      padding-bottom: 6px;
      position: relative;
      background: #fff;

      &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 0 solid #F5F5F5;
        border-bottom-width: 1px;
        z-index: 0;
      }
    }

    .distribution-tabs-bg {
      &.fixed {
        height: 32px
      }
    }

    .distribution-product {
      padding: 15px;
      margin: 0;
      border-bottom: 1px solid #F8F8F8;
    }
  }

  .distribution-product {
    &.ant-product {
      .ant-product-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ant-product-name {
          flex: 1;
        }

        .ant-product-state {
          font-size: 12px;
          line-height: 1em;
        }

        .state-done {
          color: #EE7559;
        }

        .state-not-done {
          color: #808080;
        }
      }

      .ant-product-body {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        .distribution-info {
          p {
            text-align: right;
            color: #EE7559;

          }
        }
      }
    }
  }


  .tabs-card {
    width: 284px;
    margin: 15px auto;
    border: 1px solid #EDEDED;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    display: flex;

    .tab {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      text-align: center;
      color: #A0A0A0;

      &.active {
        color: #404040;
        background: #faf7f6;
      }
    }

  }

</style>
